<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :success-text="this.refreshtext">
    <div>
      <div>
        <van-tabs v-model:active="active">
          <div>
            <van-tab title="购物车">
              <div class="dv1" v-if="cartlist!=null">
                <van-checkbox-group v-model="selGoods">
                  <van-swipe-cell v-for="(item, index) in cartlist" :key="index">
                    <van-row>
                      <van-col span="2" class="leftbox">
                        <van-checkbox :name="item" icon-size="23px" checked-color="red"></van-checkbox>
                      </van-col>
                      <van-col span="22">
                        <van-card
                            style="font-size: 13px;clear:both;"
                            :price="item.gprice"
                            :title="item.gname"
                            class="goods-card"
                            :thumb="item.gimage"
                        >
                          <template #num>
                            <van-stepper theme="round" v-model="item.gnum" @change="numChange(item,item.gnum)"/>
                          </template>
                        </van-card>
                      </van-col>
                    </van-row>
                    <template #right>
                      <van-button
                          square
                          text="删除"
                          type="danger"
                          class="delete-button"
                          style="height: 100%"
                          @click="delcard(item,index,item.id)"
                      />
                    </template>
                  </van-swipe-cell>
                </van-checkbox-group>
                <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit" style="margin-bottom: 50px">
                  <van-checkbox v-model="selAll" @click="checkAll">全选</van-checkbox>
                </van-submit-bar>
              </div>
              <div v-else>
                <div>
                  <van-image
                      width="200px"
                      height="200px"
                      style="margin-top: 30px"
                      src="https://img1.baidu.com/it/u=1083587748,2646090012&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=478"
                  />
                </div>
                <div>
                  <label style="color: black">亲,购物车还是空的</label>
                </div>
                <div style="padding-bottom: 10px"></div>
              </div>
            </van-tab>
          </div>

          <van-tab title="我常买">
            <!--          中间写常买的内容-->


          </van-tab>
          <!--下面写推荐喜欢的-->
          <van-divider
              :style="{ color: '#808080', borderColor: '#808080', padding: '0 16px'}"
          ><label style="font-size: 17px">猜你喜欢</label>
          </van-divider>
          <div>
            <van-grid :border="false" :column-num="2" center>
              <van-grid-item v-for="it in likelist" style="float: start">
                <van-image
                    :src="it.gimg"
                    style="width: 140px;height: 140px"/>
                <div style="width: 140px">
                  <div>
                    <label style="color:black;float:left;">{{ it.gname }}</label>
                  </div>
                  <div style="clear: both">
                    <label style="color: red;margin-left: -80px;">￥{{ it.gprice }}</label>
                    <van-icon name="cart" style="float: right " size="25px" color="green" @click="addCar(it)"/>
                  </div>
                </div>
              </van-grid-item>
              <!--            <van-grid-item style="float: start">-->
              <!--              <van-image-->
              <!--                  src="https://img2.baidu.com/it/u=3536506065,2380561960&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=510"-->
              <!--                  style="width: 140px;height: 140px"/>-->
              <!--              <div style="width: 140px">-->
              <!--                <div>-->
              <!--                  <label style="color:black;margin-left: -80px">女仆咖啡</label>-->
              <!--                </div>-->
              <!--                <div>-->
              <!--                  <label style="color: red;margin-left: -80px">￥52.1</label>-->
              <!--                  <van-icon name="cart" style="float: right" size="25px" color="green" @click="addCar()"/>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--            </van-grid-item>-->

            </van-grid>
          </div>
        </van-tabs>
        <div style="width: 100%; height: 50px"></div>
        <!--          底部-->
      </div>
    </div>
  </van-pull-refresh>
</template>
<script>
import axios from "axios";

export default {
  // setup() {
  //   const loading = ref(true);
  //   const onRefresh = () => {
  //     axios.get('/shopcar/checkShopCar.do').then(r=>{
  //       if (r.data.code === 200){
  //         this.cartlist = r.data.data
  //       }else{
  //         this.$toast("购物车刷新失败")
  //       }
  //     })
  //     setTimeout(() => {
  //       Toast('刷新成功');
  //       loading.value = false;
  //     }, 1000);
  //   };
  //   return {
  //     loading,
  //     onRefresh,
  //   };
  // },
  data() {
    return {
      active: 0,
      selAll: false,
      selGoods: [],
      total: 0,
      cartlist: [],
      likelist: [],
      refreshing: false,
      refreshtext: "刷新成功"
    };
  }, mounted() {
    //  此处加载购物车里的商品
    axios({
      url: "/shopcar/checkShopCar.do",
      method: 'get',
      headers: {
        "ddstoken": this.$store.state.token
      }
    }).then(res => {
      if (res.data.code === 200) {
        this.cartlist = res.data.data
      } else {
        this.$toast("购物车加载超时")
      }
    })
    this.axios.get('/shopcar/fourRandom.do').then(r => {
      if (r.data.code === 200) {
        this.likelist = r.data.data;
      } else {
        this.$toast("猜你喜欢加载超时")
      }
    })
  },
  methods: {
    onRefresh() {
      this.$router.push('/shopCar')
      setTimeout(() => {
        this.refreshing = true;
        axios({
          url: '/shopcar/checkShopCar.do',
          method:"get",
          headers:{
            "ddstoken":this.$store.state.token
          }
        }).then(r => {
          if (r.data.code === 200) {
            this.cartlist = r.data.data
            this.$forceUpdate();
          } else {
            this.$toast("购物车刷新失败")
          }
        })
        this.refreshing = false;
      }, 1000);
    },
    addCar(it) {
      axios({
        url:'/shopcar/addLikeToCar.do',
        method:'post',
        data:JSON.stringify(it),
        headers:{
          "ddstoken":this.$store.state.token,
          'Content-Type':'application/json'
        }
      }).then(r => {
        if (r.data.code === 200) {
          this.$toast(it.gname+"已添加购物车,请下拉刷新")
          this.$forceUpdate();
        } else {
          this.refreshtext = "刷新超时"
        }
      })
    },
    numChange(item) {
      this.axios.post('/shopcar/updateShopCarNum.do', item).then(r => {
        if (r.data.code === 200) {
        }
      })
    },
    onClickLeft() {
      history.back();
    },
    onSubmit() {
      // this.$store.commit("setAllValue",this.total)
      this.$router.push({path:'/pay',query:{allPrice:this.total,buygoods:JSON.stringify(this.selGoods)}})
      // mounted() {
      //   var  b = JSON.parse(this.$route.query.buygoods)
      //
      // },
      // data(){
      //   return{
      //     allValue: 0
      //   }
      // }
    },
    checkAll() {
      if (this.selAll) {
        this.selGoods = this.cartlist;
      } else {
        this.selGoods = [];
      }
    },
    delcard(item, index, id) {
      this.$dialog.confirm({
        message: `您确定要删除${item.gname}吗?`,
      }).then(() => {
        axios.post('/shopcar/delShopById.do?id=' + id).then(res => {
          if (res.data.code === 200) {
            this.cartlist.splice(index, 1);
            let i = this.selGoods.indexOf(item);
            if (i != -1) {
              this.selGoods.splice(i, 1)
            }
          } else {
            this.$toast("删除该商品失败")
          }
        })
      }).catch(() => {
        this.$toast("您已取消")
      })
    },
  },
  watch: {
    selGoods: {
      handler(arr) {
        this.total = 0;
        arr.forEach((item) => {
          this.total += item.gnum * item.gprice * 100;
        });
        if (arr.length === this.cartlist.length) {
          this.selAll = true;
        } else {
          this.selAll = false;
        }
      },
      deep: true,
    },
  },
};
</script>
<style>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}

.van-row {
  margin: 10px 0px;
}

.leftbox {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dv1 {
  margin-right: 20px;
  margin-left: 20px;
}

</style>
